<template>
  <el-row
    :gutter="gutter || 0"
    :type="formItem.type"
    :justify="formItem.justify"
    :align="formItem.align"
  >
    <el-col
      v-for="item in formList"
      :key="item.__config__.renderKey"
      class="drawing-item"
      :span="item.__config__.span"
    >
      <el-form-item
        :label="item.__config__.showLabel ? item.__config__.label : ''"
        :label-width="
          item.__config__.tag == 'form-row-container' ||
          !item.__config__.showLabel
            ? '0px'
            : item.__config__.labelWidth
            ? item.__config__.labelWidth + 'px'
            : ''
        "
      >
        <component
          :value="item.text"
          :formItem="item"
          :is="item.comName"
          :gutter="gutter"
          v-bind="item"
        />
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
import { formateForm } from "../../utils/index";
import FilesShow from "../pcComponents/components/filesShow";
import NameShow from "../pcComponents/components/nameShow";
import ImageShow from "../pcComponents/components/imageShow";
import SignShow from "./signShow";

export default {
  name: "RowContainerShow",
  components: {
    FilesShow,
    NameShow,
    ImageShow,
    SignShow
  },
  props: {
    formItem: {
      type: Object,
      default: () => {}
    },
    gutter: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      formList: []
    };
  },
  methods: {
    formateForm
  },

  watch: {
    formItem: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.formList = formateForm(newValue?.__config__?.children || []);
        }
      }
    }
  },

  methods: {}
};
</script>

<style lang="scss"></style>
